<template>
  <div>
		<van-nav-bar  title="技师中心" />
		<div class="mybg">
			<div class="bgcolor">
				<div class="color-white artificer">
					<div class="avatar">
						<img-box class="classImg" :isBr50="isBr50" :img-url="info.UserFace" />
					</div>
					<div class="ml-16">
						<div class="name">
							<div class="fs-40">{{ info.UserName}}</div>
							<div class="vip_icon">
								<img src="@/assets/images/physio/level.png" /> {{ info.GradeName }}
							</div>
						</div>
						<div class="fs-28">技师ID：{{ info.CardNumber }}</div>
					</div>
					<div class="address" @click="getamap" v-if="IsCostType !== 0"><div><svg-icon icon-class="location" class="fs-30 mr-10" @goPage="getamap" /></div> <span class="text-show-line-1 ">{{ address }}</span></div>
				</div>
			</div>
			<div class="viplevel">
				<div class="vipcard">
					<div class="mg-2 current-level">已达等级</div>
					<div class="level-name">{{ info.NowAppraisalGradeName }}</div>
					<div class="flex flex-s-c plr-32">					
						<div class="upgrade">{{levelUp }}</div>
						<div class="rule" @click="showDescription = true">升级规则</div>
					</div>
					<div class="plr-32 mt-24">
						<van-progress :percentage="percentage" :show-pivot="showpivot" stroke-width="6" class="progress"  color="#FFF" track-color="#BDFFDE "/>	
					</div>					
					<div class="level"><img src="@/assets/images/physio/level.png" /></div>
				</div>
				<div class="mymsg">
					<div class="score">
						<div class="myscore">
								<span class="num">{{ info.Performance }}</span>
								<span class="myname">本期业绩</span>
						</div>
						<div class="myscore">
							<span class="num">{{  info.Integral }}</span>
							<span class="myname">本期积分</span>
						</div>
						<div class="myscore">
							<span class="num">{{ info.AddRatio }}%</span>
							<span class="myname">本期加钟</span>
						</div>
					</div>
				</div>
			</div>
			<div class="mg-32 bg-white br-40 board">
				<div class="data-board">数据看板</div>
				<div class="countmsg">
					<div class="count" @click="goRecord">
						<div class="countimg">
							<img src="@/assets/images/physio/count.png" />
							<img src="@/assets/images/physio/recount.png" />
						</div>
						<div class="desc">数字统计</div>
					</div>
					<div class="count" @click="goIntegralList">
						<div class="countimg">
							<img src="@/assets/images/physio/integral.png" />
							<img src="@/assets/images/physio/reintegral.png" />
						</div>
						<div class="desc">积分统计</div>
					</div>
					<div class="count" @click="goMoneyLogList">
						<div class="countimg">
							<img src="@/assets/images/physio/capital.png" />
							<img src="@/assets/images/physio/recapital.png" />
						</div>
						<div class="desc">资金明细</div>
					</div>
					<div class="count" @click="goRewardreport">
						<div class="countimg">
							<img src="@/assets/images/physio/divide.png" />
							<img src="@/assets/images/physio/redivide.png" />
						</div>
						<div class="desc">分成明细</div>
					</div>
				</div>
			</div>
			<van-popup v-model="showDescription" class="br-24">
				<div class="appraisal">
					<div class="title">
						<div class="fs-34 tac">规则说明</div>
						<van-icon name="cross"  size="23" @click="showDescription = false" />
					</div>
					<div class="ptb-24 fs-28" v-html="info.AppraisalDescription"></div>
				</div>
			</van-popup>
			<van-popup v-model="showTips" :close-on-click-overlay="isclose" class="services">
				<div class="unartificer">
						<div class="fs-28 tac">您不是技师，请联系服务商</div>
				</div>
			</van-popup>
		</div>
		<van-popup v-model="AmapShow" position="bottom" class="bottom-popup">
      <AmapSearch v-if="showAmap"  class=" bg-gray" style="min-height:100vh" @closeAmap="closeAmap" @changeMap="changeMap" :timeNow="new Date()" />
    </van-popup>
		<tabBar />
	</div>
	
</template>
<script>
import tabBar from './tabBar.vue'
import { GetArtificerPerformance,GetArtificerInfo,SubmitArtificerLngLat,GetArtificerTripCostType } from 'api/physio'
import AmapSearch from 'components/address/amapSearch'
import imgBox from 'components/imgBox'
export default {
	components: {
    imgBox,tabBar,AmapSearch
  },
	data(){
		return{
			info: {},
			showDescription: false,
			showpivot: false,
			percentage: 0,			
			isBr50: true, //用来判断图片圆形
			levelUp: '',
			showTips: false,
			isclose: false,
			address: '去定位', //技师端设置出发地址
			AmapShow:false,
			showAmap: false,
			Lat: '',
			Lng: '',
			IsCostType: 0,
		}
	},
	created(){
		this.GetArtificerPerformance()
		this.GetArtificerInfo()
		this.GetArtificerTripCostType()
	},
	methods:{
		GetArtificerTripCostType(){
			GetArtificerTripCostType().then(res =>{
				if(res.State){
					this.IsCostType = res.Data
				}
			})
		},
		getamap(){
			this.AmapShow = true
			this.showAmap = true
		},
		closeAmap(){
			this.AmapShow = false
			this.showAmap = false
		},
		changeMap(address,name){
			console.log("位置信息",address)
			let item = JSON.parse(address)
			console.log('mapaddress',item)
			//this.pageData.ContactAddress = item.address
			this.Lng = item.lng
			this.Lat = item.lat
			this.address = name
			this.SubmitArtificerLngLat()
		},
		SubmitArtificerLngLat(){
			const obj = {}
			obj.lat = this.Lat
			obj.lng = this.Lng
			obj.positionAddress = this.address
			SubmitArtificerLngLat(obj).then(res =>{
				if(res.State){
					this.$toast('设置地址成功')
				}
			})
		},
		GetArtificerInfo(){
			GetArtificerInfo().then(res => {
				if(res){
					if(res.Data.ID === 0 || res.Data.State === 0 || res.Data.State === 3 || res.Data.State === 5){
						this.showTips = true
					}
					if(res.Data.PositionAddress !== ''){
						this.address = res.Data.PositionAddress
					}
				}
			})
		},
		back(){
			this.$router.go(-1)
		},
		GetArtificerPerformance(){
			GetArtificerPerformance().then(res => {
				if(res){
					if(res.Data.NextAppraisalGradeName === ''){
						this.levelUp = '恭喜您，在本期已可达最高级别'
						this.percentage = 100
					}else if(res.Data.NextGradePerformance <= res.Data.Performance){
						if(res.Data.NextGradeIntegral <= res.Data.Integral){
							this.levelUp = '加钟率不达标'
							this.percentage = 100
						}else{
							const integral = (res.Data.NextGradeIntegral - res.Data.Integral).toFixed(2)
							this.levelUp = '还差' + integral + '积分可升级' + res.Data.NextAppraisalGradeName
							this.percentage = ((res.Data.Integral/res.Data.NextGradeIntegral)*100).toFixed(2)
						}
					}else if(res.Data.NextGradeIntegral <= res.Data.Integral){	
						const performance = (res.Data.NextGradePerformance - res.Data.Performance).toFixed(2)						
						this.levelUp = '还差' + performance + '业绩可升级' + res.Data.NextAppraisalGradeName
						this.percentage = ((res.Data.Performance/res.Data.NextGradePerformance)*100).toFixed(2)
					}else{
						const performance = (res.Data.NextGradePerformance - res.Data.Performance).toFixed(2)	
						const integral = (res.Data.NextGradeIntegral - res.Data.Integral).toFixed(2)
						this.levelUp = '还差' + performance + '业绩、'+ integral +'积分可升级' + res.Data.NextAppraisalGradeName
						this.percentage = ((res.Data.Performance/res.Data.NextGradePerformance)*100).toFixed(2)
					}
					this.info  = res.Data
				}
			})
		},
		goRecord(){
			window.location.href = this.$LocalDomain + '/circle/#/productWriteoff/record?type=2'
		},
		goRewardreport(){
			window.location.href = this.$LocalDomain + '/m/user/rewardreport'
		},
		goMoneyLogList(){
			window.location.href = this.$LocalDomain + '/m/user/MoneyLogList'
		},
		goIntegralList(){
			window.location.href = this.$LocalDomain + '/m/user/IntegralList'
		},
	}
}
</script>
<style lang="scss" scoped>
	.mybg{
		background: url(../../assets/images/physio/mybackground.png) 100% no-repeat;
		padding-bottom: 100px;
	}
	.bgcolor{
		background: linear-gradient(136deg, #181554 0%, #1D1722 100%) repeat-x center bottom;		
		height: 444px;	
		border-radius: 0 0 80% 80%/20%;
	}
	
	.vipcard{
		width: 686px;
		height: 340px;
		background: linear-gradient(134deg, #DDFFD9 0%, #F9FFD9 0%, #D8FED6 30%, #B0FBC9 60%, #24C373 100%);
		border-radius: 36px;
		border: 2px solid;
		border-image: linear-gradient(136deg, rgba(255, 255, 255, 0.29), rgba(255, 255, 255, 0.45)) 2 2;
		position: relative;
		display: flex;
		flex-direction: column;
		border: none;
	}
	.avatar{
		width: 112px;
	}
	.artificer{
		display: flex;
		align-items: center;
		padding: 24px 0 36px 32px;
	}
	.name{
		display: flex;
		align-items: center;
	}
	.vip_icon{
		border: 1px solid #fff;
		border-radius: 16px;
		padding-right:10px ;
		display: flex;
		align-items: center;
		height: 34px;
		margin-left: 10px;
		img{
			width: 42px;
			margin: 0 5px;
		}
	}
	.viplevel{
		padding: 0 32px;
		margin-top: -272px;
	}
	.level{
		width: 276px;
		position: absolute;
		top: -30px;
		right: 28px;
	}
	.current-level{
		width: 172px;
		height: 56px;
		line-height: 56px;
		background: #3CCC81 ;
		border-radius: 36px 0px 36px 0px;
		color: #fff;
		text-align: center;
	}
	.level-name{
		height: 118px;
		line-height: 118px;
		font-size: 56px;
		margin: 16px 0 0 42px;
		color: #0F7F46;
		font-weight: normal;
		font-style: italic;
	}
	.upgrade{
		color: #3F2A8F;
		width: 75%;
	}
	.rule{
		width: 136px;
		height: 54px;
		line-height: 54px;
		background: #FFFFFF;
		border-radius: 27px;
		opacity: 0.34;
		color: #3F2A8F;
		text-align: center;
	}
	.progress{
		width: 100%;
	}
	.mymsg{
		width: 686px;
		height: 202px;
		background: linear-gradient(136deg, #F1F7FF 0%, #FEF3FF 100%);
		box-shadow: 0px 4px 12px 0px rgba(191,145,239,0.1);
		border-radius: 0px 0px 48px 48px;
		border: 2px solid #FFFFFF;
		margin-top: -56px;
		.score{
			display: flex;
			justify-content: space-around;
			margin-top: 76px;
			.myscore{
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.num{
				height: 60px;
				line-height: 60px;
				color: #191545;
				font-size: 52px;
				font-weight: bold;
			}
			.myname{
				color:#191545; 
				font-weight: 400;
			}
		}
	}
	
	.board{
		border: 12px solid;
		border-image: linear-gradient(136deg, rgba(216, 254, 214, 1), rgba(234, 255, 216, 1), rgba(157, 243, 189, 1)) 12 12;
		border-radius: 40px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.data-board{
		width: 348px;
		height: 72px;
		background: linear-gradient(180deg, #C2FDCF 0%, #E4FFD7 50%, #B7FBCB 100%);
		border-radius: 0px 0px 56px 56px;
		color: #1D172B;
		font-size: 32px;
		text-align: center;
	}
	.desc{
		font-size: 28px;
		color: $physio-primary1;
	}
	.countmsg{
		display: flex;
		flex-wrap: wrap;
		padding: 40px 34px 0;
	}
	.count{
		width: 276px;
		height: 138px;
		background: linear-gradient(136deg, #F3F8FF 0%, #FEF6FF 100%);
		border-radius: 14px;
		display: flex;
		align-items: center;
		margin-bottom: 40px;
		img{
			width: 64px;
		}
	}
	.count:nth-child(2n){
		margin-left: 40px;
	}
	.countimg{
		display: flex;
		flex-direction: column;
		margin: 32px 32px 0;
	}
	.appraisal{
		width: 686px;
		height: 996px;
		background: #FFFFFF;
		border-radius: 24px;
		padding: 26px 32px;
	}
	.van-icon{
		float: right;
		top: -24px;
	}
	.title{
		padding-bottom: 24px;
		border-bottom: 2px solid #F2F3FC;;
	}
	.unartificer{
		background: #fff;
		padding: 24px;
	}
	.services{
		width: 60%;
		border-radius: 12px;
	}
	.return{
		width: 200px;
		font-size: 28px;
    background: #24c373;
    text-align: center;
    height: 60px;
    line-height: 60px;
    border-radius: 12px;
    color: #fff;
    margin: 24px auto 0;
	}
	.address{
		margin-left: 30px;
		display: flex;
		align-items: center;
		border: 1px solid #fff;
		padding: 5px 10px;
		border-radius: 12px;
		max-width: 240px;
	}
</style>

